<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
<!-----------------------------------------------------------------------
- Copyright (C) 2025, iwyxdxl
- Licensed under GNU GPL-3.0 or higher, see the LICENSE file for details.
-
- This file is part of WeChatBot.
- WeChatBot is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- WeChatBot is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
-
- You should have received a copy of laughable General Public License
- along with WeChatBot.  If not, see <http://www.gnu.org/licenses/>.
------------------------------------------------------------------------>
    <title>快速上手配置 - WeChatBot</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            background-color: #f7f8fc;
            font-family: Arial, sans-serif;
            padding: 15px;
            box-sizing: border-box;
        }
        .container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-width: 600px;
            margin: 20px auto;
            width: 100%;
            box-sizing: border-box;
        }
        h1 {
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 22px;
            color: #333;
            text-align: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        h2 {
            font-size: 18px;
            margin-top: 25px;
            margin-bottom: 15px;
            color: #444;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 8px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
            font-size: 14px;
        }
        input[type="text"], input[type="password"], select {
            width: 100%;
            padding: 10px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
        }
        input:focus, select:focus {
            border-color: #4caf50;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
            outline: none;
        }
        small {
            font-size: 0.85em;
            color: #666;
            display: block;
            line-height: 1.4;
            margin-top: 3px;
        }
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        button, a.button-like {
            flex-grow: 1;
            padding: 12px 18px;
            font-size: 15px;
            text-decoration: none;
            border: none;
            border-radius: 4px;
            background-color: #4caf50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
            text-align: center;
            min-width: 150px;
        }
        button:hover, a.button-like:hover {
            background-color: #45a049;
        }
        a.button-like.secondary {
            background-color: #4caf50;
        }
        a.button-like.secondary:hover {
            background-color: #45a049;
        }
        a.button-like.skip {
            background-color: #6c757d;
        }
        a.button-like.skip:hover {
            background-color: #5a6268;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
            vertical-align: middle;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 28px;
        }
        .slider::before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #4caf50;
        }
        input:checked + .slider::before {
            transform: translateX(22px);
        }
        .switch-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .switch-item > label {
            font-weight: bold;
            color: #555;
            font-size: 14px;
            margin-bottom: 0;
        }
        .switch label {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .switch-item label b {
            font-weight: normal;
            color: #333;
        }
        .entry {
            display: grid;
            grid-template-columns: 2fr 3fr auto;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }
        .entry input,
        .entry select {
            box-sizing: border-box;
            min-width: 100px;
            width: 100%;
            height: 38px;
            font-size: 14px;
            margin-bottom: 0;
        }
        .entry button {
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            height: 38px;
            padding: 0 12px;
            cursor: pointer;
            transition: background-color 0.3s;
            min-width: 70px;
        }
        .entry button:hover {
            background-color: #d32f2f;
        }
        
        .api-key-hint {
            color: #ff9800 !important;
            font-weight: bold;
            margin-top: 5px !important;
        }
        button.add-user-btn {
             margin-top:10px;
             background-color: #5cb85c;
             padding: 8px 12px;
             font-size: 14px;
        }
        button.add-user-btn:hover {
            background-color: #4cae4c;
        }
        .legal-notice {
            margin-top: 30px;
            padding: 15px 20px;
            background-color: #f7f8fc;
            border-top: 1px solid #e0e0e0;
            text-align: center;
            font-size: 0.85em;
            color: #6c757d;
            line-height: 1.5;
            width: 100%;
            max-width: 600px;
            box-sizing: border-box;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 20px;
        }
        .legal-notice .legal-toggle {
            cursor: pointer;
            color: #4caf50;
            font-weight: bold;
            margin-bottom: 10px;
            display: inline-block;
        }
        .legal-notice .legal-content {
            display: none;
            text-align: left;
            font-size: 0.95em;
        }
        .legal-notice .legal-content a {
            color: #4caf50;
            text-decoration: none;
        }
        .legal-notice .legal-content a:hover {
            text-decoration: underline;
        }
        @media (max-width: 768px) {
            body {
                padding: 15px 0;
            }
            .container {
                margin: 10px auto;
                padding: 15px;
                border-radius: 0;
                box-shadow: none;
            }
            h1 {
                font-size: 20px;
            }
            h2 {
                font-size: 17px;
            }
            button, a.button-like {
                font-size: 14px;
                padding: 10px 15px;
            }
            .entry {
                grid-template-columns: 1fr;
            }
            .entry button {
                width: 100%;
                margin-top: 5px;
            }
            .button-group {
                flex-direction: column;
            }
            .legal-notice {
                font-size: 0.8em;
                padding: 10px 15px;
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>WeChatBot 快速上手配置</h1>
        <form method="post" action="{{ url_for('quick_start') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <h2>1. API 配置</h2>
            <div class="form-group">
                <label for="quick_start_api_provider">API 服务商:</label>
                <select id="quick_start_api_provider" name="quick_start_api_provider" title="API 服务商">
                    <option value="weapis" {% if current_api_provider == 'weapis' %}selected{% endif %}>WeAPIs (推荐, 支持聊天/识图/联网)</option>
                    <option value="siliconflow" {% if current_api_provider == 'siliconflow' %}selected{% endif %}>硅基流动 (仅聊天)</option>
                    <option value="deepseek_official" {% if current_api_provider == 'deepseek_official' %}selected{% endif %}>DeepSeek官方 (仅聊天)</option>
                    <option value="other" {% if current_api_provider == 'other' %}selected{% endif %}>其它 (仅聊天, 自定义URL)</option>
                </select>
                <a href="https://linkvg.v1chat.cc/register?aff=Rf3h" target="_blank" class="button-like secondary" id="weapis_register_link" style="margin-top: 10px; display: block; width: fit-content;">点击申请 WeAPIs 密钥</a>
            </div>

            <div class="form-group" id="custom_base_url_group" style="display: none;">
                <label for="quick_start_custom_base_url">自定义 Base URL:</label>
                <input type="text" id="quick_start_custom_base_url" name="quick_start_custom_base_url" placeholder="例如: https://api.example.com/v1" value="{{ current_custom_base_url if current_api_provider == 'other' else '' }}">
            </div>

            <div class="form-group">
                <label for="quick_start_api_key">API Key:</label>
                <input type="text" id="quick_start_api_key" name="quick_start_api_key" value="{{ config.DEEPSEEK_API_KEY or '' }}" placeholder="请输入 API Key" class="api-key-input">
                <small class="api-key-hint">{{ "出于安全考虑，已隐藏完整API Key。如需修改，请直接输入新的API Key。" if "*" in (config.DEEPSEEK_API_KEY or '') else "" }}</small>
                <small id="api_key_note">申请 WeAPIs 密钥后，聊天、图片识别、联网搜索功能将使用此 Key 和推荐配置。</small>
            </div>

            <div class="form-group" id="non_weapis_note" style="display: none;">
                <small style="color: #dd6600; font-weight: bold;">提示: 您选择的AI服务商可能不支持识图模型和联网搜索模型，如需使用这些功能，请到详细配置页面单独设置。</small>
            </div>

            <h2>2. 用户列表</h2>
            <div class="form-group">
                <label>配置与机器人对话的用户及其角色 Prompt:</label>
                <div id="listen-list">
                    {% for item in config.LISTEN_LIST %}
                    <div class="entry">
                        <input type="text" name="nickname" value="{{ item[0] }}" placeholder="微信昵称/备注" required>
                        <select name="prompt_file" required title="选择 Prompt 文件">
                            <option value="">-- 选择Prompt文件 --</option>
                            {% for file in prompt_files %}
                            <option value="{{ file }}" {% if item[1] == file %}selected{% endif %}>{{ file }}</option>
                            {% endfor %}
                        </select>
                        <button type="button" onclick="removeEntry(this)">删除</button>
                    </div>
                    {% endfor %}
                </div>
                <button type="button" onclick="addEntry()" class="add-user-btn">添加用户</button>
                <small>
                    <strong>提示:</strong><br>
                    • "微信昵称/备注" 必须与微信中的完全一致<br>
                    • Prompt 文件用于定义 AI 的角色和个性特征<br>
                    • 您可以在完整配置页面的 "Prompt管理" 中创建和编辑自定义角色
                </small>
            </div>

            <h2>3. 功能开关</h2>
            <div id="online_search_switch_group">
                <div class="form-group">
                    <div class="switch-item">
                        <label for="enable_online_api_switch"><b>联网搜索</b></label>
                        <div class="switch">
                            <label>
                                <input type="checkbox" id="enable_online_api_switch" name="ENABLE_ONLINE_API" {% if config.ENABLE_ONLINE_API %}checked{% endif %}>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                    <small>允许机器人联网搜索信息以回答问题 (如天气、新闻)。</small>
                </div>
            </div>
            <div class="form-group">
                <div class="switch-item">
                    <label for="enable_auto_message_switch"><b>主动消息</b></label>
                    <div class="switch">
                        <label>
                            <input type="checkbox" id="enable_auto_message_switch" name="ENABLE_AUTO_MESSAGE" {% if config.ENABLE_AUTO_MESSAGE %}checked{% endif %}>
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
                <small>允许机器人根据设定的时间间隔主动发送消息。</small>
            </div>

            <div class="button-group">
                <button type="submit">保存并进入完整配置页面</button>
                <a href="{{ url_for('index', skipped='true') }}" class="button-like skip">跳过快速配置</a>
            </div>
        </form>
    </div>

    <div class="legal-notice">
        <div class="legal-toggle" id="toggleLegal">显示法律声明</div>
        <div class="legal-content" id="legalContent">
            <p>
                Modified based on the <strong>KouriChat</strong> project.<br>
                原项目版权: Copyright (C) 2025, umaru<br>
                修改版本版权: Copyright (C) 2025, iwyxdxl
            </p>
            <p>
                本软件是自由软件，您可以根据 <a href="https://www.gnu.org/licenses/gpl-3.0.zh-cn.html" target="_blank">
                GNU 通用公共许可证 第3版（或更高版本）</a> 的条款重新发布和修改本软件。
            </p>
            <p>
                本软件按“现状”提供，不提供任何明示或暗示的担保（包括适销性或特定用途适用性）。<br>
                如您未收到完整的许可证副本，请访问 <a href="https://www.gnu.org/licenses/gpl-3.0.zh-cn.html" target="_blank">
                GNU GPL 3.0 中文版</a> 获取。
            </p>
            <p>
                源代码获取：<br>
                原项目源代码：<a href="https://github.com/KouriChat/KouriChat" target="_blank">https://github.com/KouriChat/KouriChat</a><br>
                本项目源代码：<a href="https://github.com/iwyxdxl/WeChatBot_WXAUTO_SE" target="_blank">https://github.com/iwyxdxl/WeChatBot_WXAUTO_SE</a>
            </p>
            <p>
                本软件仅供学习和娱乐使用，请勿用于违法用途，否则产生的一切法律责任均与任何作者无关。
            </p>
        </div>
    </div>

    <script>
        // 设置API Key输入字段的交互逻辑
        function setupApiKeyInputs() {
            const apiKeyInputs = document.querySelectorAll('.api-key-input');
            
            apiKeyInputs.forEach(input => {
                const isHidden = input.value && input.value.includes('*');
                
                if (isHidden) {
                    // 为隐藏的API Key添加特殊样式
                    input.style.backgroundColor = '#fff3e0';
                    input.style.border = '2px solid #ff9800';
                    
                    // 添加焦点事件
                    input.addEventListener('focus', function() {
                        if (this.value && this.value.includes('*')) {
                            this.placeholder = '请输入新的API Key来替换隐藏的密钥';
                            this.style.backgroundColor = '#e8f5e9';
                            this.style.border = '2px solid #4caf50';
                        }
                    });
                    
                    input.addEventListener('blur', function() {
                        if (this.value && this.value.includes('*')) {
                            this.style.backgroundColor = '#fff3e0';
                            this.style.border = '2px solid #ff9800';
                            this.placeholder = '请输入 API Key';
                        }
                    });
                    
                    // 添加输入事件，清除隐藏样式
                    input.addEventListener('input', function() {
                        if (this.value && !this.value.includes('*')) {
                            this.style.backgroundColor = '';
                            this.style.border = '';
                            this.placeholder = '请输入 API Key';
                        }
                    });
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            // 初始化API Key输入字段
            setupApiKeyInputs();
            
            const apiProviderSelect = document.getElementById('quick_start_api_provider');
            const customBaseUrlGroup = document.getElementById('custom_base_url_group');
            const customBaseUrlInput = document.getElementById('quick_start_custom_base_url');
            const apiKeyNote = document.getElementById('api_key_note');
            const nonWeapisNote = document.getElementById('non_weapis_note');
            const onlineSearchSwitchGroup = document.getElementById('online_search_switch_group');
            const onlineApiSwitch = document.getElementById('enable_online_api_switch');
            const weapisRegisterLink = document.getElementById('weapis_register_link');
            const apiKeyInput = document.getElementById('quick_start_api_key');

            function updateProviderUI() {
                const selectedProvider = apiProviderSelect.value;

                if (selectedProvider === 'other') {
                    customBaseUrlGroup.style.display = 'block';
                    customBaseUrlInput.required = true;
                } else {
                    customBaseUrlGroup.style.display = 'none';
                    customBaseUrlInput.required = false;
                }

                if (selectedProvider === 'weapis') {
                    apiKeyNote.textContent = '申请 WeAPIs 密钥后，聊天、图片识别、联网搜索功能将使用此 Key 和推荐配置。';
                    apiKeyNote.style.color = '#666';
                    nonWeapisNote.style.display = 'none';
                    onlineSearchSwitchGroup.style.display = 'block';
                    if(onlineApiSwitch) onlineApiSwitch.disabled = false;
                    weapisRegisterLink.style.display = 'block';
                    apiKeyInput.placeholder = "请输入从 WeAPIs 获取的 API Key";
                } else {
                    apiKeyNote.textContent = '请输入您选择的服务商的 API Key。';
                    apiKeyNote.style.color = '#555';
                    nonWeapisNote.style.display = 'block';
                    onlineSearchSwitchGroup.style.display = 'none'; 
                    if(onlineApiSwitch) {
                        onlineApiSwitch.checked = false;
                        onlineApiSwitch.disabled = true; 
                    }
                    weapisRegisterLink.style.display = 'none';
                    apiKeyInput.placeholder = "请输入 API Key";
                }
            }

            updateProviderUI(); 
            apiProviderSelect.addEventListener('change', updateProviderUI);
        });

        function addEntry() {
            const container = document.getElementById('listen-list');
            const div = document.createElement('div');
            div.className = 'entry';
            div.innerHTML = `
                <input type="text" name="nickname" placeholder="微信昵称/备注" required>
                <select name="prompt_file" required title="选择 Prompt 文件">
                    <option value="">-- 选择Prompt文件 --</option>
                    {% for file in prompt_files %}
                    <option value="{{ file }}">{{ file }}</option>
                    {% endfor %}
                </select>
                <button type="button" onclick="removeEntry(this)">删除</button>
            `;
            container.appendChild(div);
        }

        function removeEntry(button) {
            button.parentElement.remove();
        }

        document.getElementById('toggleLegal').addEventListener('click', function() {
            var content = document.getElementById('legalContent');
            if (content.style.display === 'none' || content.style.display === '') {
                content.style.display = 'block';
                this.textContent = '隐藏法律声明';
            } else {
                content.style.display = 'none';
                this.textContent = '显示法律声明';
            }
        });
    </script>
</body>
</html>